<script setup lang="ts">
import {Shard} from "@/views/types/shards.ts";
import ShardCardContent from "@/views/components/ShardCardContent.vue";
import IndexShardsDialog from "@/views/components/IndexShardsDialog.vue";
import {ref} from "vue";
const props = defineProps<{shard: Shard}>();
const visible =ref<boolean>(false);
const showDialog = () =>{
  visible.value=true;
}
</script>

<template>
  <div style="height:180px;margin:5px;border: 1px solid  var(--el-border-color);padding: 5px;">
    <IndexShardsDialog v-if="visible" v-model:visible="visible" :shard="props.shard"/>
    <div style="width: 100%;display: flex;justify-content: space-between;">
        <div style="text-overflow: ellipsis; white-space: nowrap;overflow: hidden" :title="props.shard.index">{{props.shard.index}}</div>
        <div style="cursor: pointer" @click="showDialog"><el-icon><FullScreen /></el-icon></div>
    </div>
    <ShardCardContent :shard="shard" :detail="false"/>
  </div>
</template>

<style scoped>

</style>